<template>
	<div>
		<bread-crumb refresh @actRefresh="getDataList">
			<template slot="title">企业成员管理</template>
		</bread-crumb>

		<el-table :data="dataList" size="" v-loading="loading" border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="name" label="成员名称"></el-table-column>
			<el-table-column prop="avatar" label="头像">
				<template  slot-scope="scope">
					<img :src="scope.row.avatar" alt="" width="40">
				</template>
			</el-table-column>
			<el-table-column prop="gender" label="性别">
				<template slot-scope="scope">
					<span  class="333" v-if="scope.row.gender== 0">-</span>
					<span  class="333" v-if="scope.row.gender== 1">男</span>
					<span  class="333" v-if="scope.row.gender== 2">女</span>
				</template>
			</el-table-column>
			<el-table-column prop="userId" label="user_id"></el-table-column>
			<el-table-column prop="mobile" label="mobile"></el-table-column>
			<el-table-column prop="department" label="所属部门"></el-table-column>
			<el-table-column prop="position" label="职位"></el-table-column>

			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small">删除员工</el-button>
					<el-button type="primary" size="small" @click="showExternalUser(scope.row)">查看客户</el-button>
				</template>
			</el-table-column>

		</el-table>
		<div class="hidden-xs">
			<el-pagination background :pager-count="pagerCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
		</div>
		<div class="visible-xs">
			<el-pagination background :pager-count="pagerCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" layout="pager" :total="totalCount"></el-pagination>
		</div>

		<!--弹层-->
		<el-dialog title="查看" :visible.sync="visibleDialog" width="80%" >
			<div class="global-input-content">
				<el-table :data="externalUserList" size="mini" v-loading="loading" border style="width:100%">
					<el-table-column prop="id" label="id" width="70"></el-table-column>
					<el-table-column prop="name" label="成员名称"></el-table-column>
					<el-table-column prop="avatar" label="头像">
						<template  slot-scope="scope">
							<img :src="scope.row.avatar" alt="" width="40">
						</template>
					</el-table-column>
					<el-table-column prop="gender" label="性别">
						<template slot-scope="scope">
							<span  class="333" v-if="scope.row.gender== 0">-</span>
							<span  class="333" v-if="scope.row.gender== 1">男</span>
							<span  class="333" v-if="scope.row.gender== 2">女</span>
						</template>
					</el-table-column>
					<el-table-column prop="gender" label="类型">
						<template slot-scope="scope">
							<span  class="333" v-if="scope.row.type== 1">微信用户</span>
							<span  class="333" v-if="scope.row.type== 2">企业微信</span>
						</template>
					</el-table-column>
					<el-table-column prop="externalUserid" label="用户id"></el-table-column>
					<el-table-column prop="remarkMobiles" label="mobile"></el-table-column>

					<el-table-column prop="userid" label="所属职员">
						<template slot-scope="scope">

							<a style="color:blue">{{scope.row.userid}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间"></el-table-column>


				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	apiWxWorkExternalUserList, apiWxWorkExternalUserListOfUser,
	apiWxWorkUserList,
} from '@/axios/api.system';
import { mixins } from '@/mixins/mixins.global';
import { mixinUtils } from '@/mixins/mixins.utils';
import breadCrumb from '@/views/components/breadCrumb';
export default {
	name: 'wxWorkUser',
	mixins:[mixins,mixinUtils],
	components:{breadCrumb},
	data() {
		return {
			visibleDialog:false,
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],
			externalUserList:[],//外部客户数据
			externalUserCount:0,//外部客户数量
		}
	},
	mounted() {
	},
	created() {
		this.getDataList()
	},
	methods:{

		//默认数据
		getDataList() {
			apiWxWorkUserList({
				pageSize: this.pageSize,
				page    : this.page,
			}).then(( res ) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},

		//显示下线客户
		showExternalUser(data) {
			this.visibleDialog = true
			apiWxWorkExternalUserListOfUser({
				pageSize: 100,
				page    : 1,
				userId  : data.userId
			}).then(( res ) => {
				this.externalUserCount = res.count
				if (res.data.length > 0) {
					this.externalUserList = res.data
				} else {
					this.externalUserList = []
				}
			})
		},





		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

};
</script>

<style lang="less">

</style>
